$(function(){
    function getCartData( cart_name = "cart"){
          // 判定localstorage 里面是否存在 cart数据， 如果存在我们就把他变成对象返回出去赋值给 cart ; 
          // 如果不存在那么我们就返回一个空对象; 
          try{
                var res = JSON.parse( localStorage.getItem(cart_name))
                // 如果不存在cart那么我们需要返回一个空对象; 
                if( res === null ) return {};

                return res; 

          }catch(e){
                // console.log("error");
                return {};
          }
    }
    var cart = getCartData();

    // 进行数据的渲染 : 
    $.ajax({
          url : "./list.json",
          success : function( res ){
                render(res.goods);
          }
    })

    // 过滤数据并渲染; 
    function render( list ){

          // 根据cart里面的id去过滤商品数据; 
          list = list.filter( item => {
                if(item.id in cart){
                      item.count = cart[ item.id ];
                      return true;
                };
          });
          // 渲染页面; 
          $(".contents").html( 
                list.map( item => 
                      `<div class="goods" data-id="${item.id}">
                            <div class="img-box">
                                  <img src="${item.img}" alt="">
                            </div>
                            <div class="title">${item.title}</div>
                            <div class="xiaoji">${ item.price }</div>
                            <div class="count">
                                  <button class="add">+</button>
                                  <input type="text" value=${ item.count }>
                                  <button class="reduce">-</button>
                            </div>
                            <div class="price">${ item.price * item.count }</div>
                            <div class="options">
                                  <a 
                                  class="remove"
                                  href="javascript:void(0)">删除</a>
                            </div>
                      </div>`
                ).join("")
          );


          // 增加购物车 
          $(".contents").on("click" , ".add" , function(){
                // 获取当前按钮对应商品的的id; 
                var id = $(this).parents(".goods").attr("data-id");
                // 1. 让input的value增加; 
                // 2. 让小计计算结果增加; 
                // 让商品数量自增; 
                cart[id]++

                $(this).siblings("input").val(cart[id]);
                
                // 计算小计 : 

                var price = $(this).parent().siblings(".xiaoji").html();

                $(this).parent().siblings(".price").html(  cart[id] * price ) ; 

                //把更新好的数据放入到 购物车之中
                localStorage.setItem( "cart" , JSON.stringify( cart ) );
          })
          
          $(".contents").on("click" , ".remove" , function(){
                var id = $(this).parents(".goods").attr("data-id")

                $(this).parents(".goods").remove();

                delete cart[id]

                localStorage.setItem("cart" , JSON.stringify(cart));
          })
    }

});